<style>
    .dhh-block-url-bind-tab {
        height: 789px;
        margin-top: 10px;
        float: left;
        width: 100%;
    }
    
    .input-box {
        height: 30px;
        float: left;
        width: 100%;
        margin-top: 30px;
        margin-left: 30px;
    }
    
    .click-opraty {
        font-size: 20px;
        cursor: pointer;
        margin: 5px;
    }
    
    .input-line-1 {
        width: 50%;
        height: 30px;
        display: inline-block;
        float: left;
        margin-bottom: 5px;
    }
    
    .input-line-1 label {
        height: 30px;
        width: 30%;
        float: left;
        line-height: 30px;
        -text-indent: 10px;
        text-align: right;
        padding-right: 2%;
    }
    
    .input-line-1 input,
    .input-line-1 select {
        height: 30px;
        width: 60%;
        float: left;
        border: solid 1px lightgray;
        text-indent: 15px;
    }
</style>
<div id="dhh-block-url-bind" class="show_page_content">
    <!-- 顶部按钮 -->
    <div class="top_btn">
        <div class="layui-btn input-line" id="block-url-bind-add"><i class="layui-icon layui-icon-add-circle-fine"></i>添加</div>
    </div>
    <div class="dhh-block-url-bind-tab">
        <table id="dhh-block-url-bind-table" lay-filter="order"></table>
    </div>
</div>
<div id="input-model" style="display:none;">
    <div class="input-box">
        <div class="input-line-1">
            <label for=" ">域名：</label>
            <input type="text" index="0" placeholder="请输入域名" class="app_num domain" field="domain" rexg="^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$" msg="域名格式不正确" rexIndex="0">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1">
            <label for=" ">模块名：</label>
            <input type="text" index="1" placeholder="请输入模块名" class="app_num module" field="module" rexg="^[a-zA-Z][A-Za-z0-9_]+" msg="格式不正确" rexIndex="1">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1">
            <label for=" ">控制器名：</label>
            <input type="text" index="2" placeholder="请输入控制器名" class="app_num controller" field="controller" rexg="^[a-zA-Z][A-Za-z0-9_]+" msg="格式不正确" rexIndex="2">
        </div>
        <span id=""></span>
    </div>
    <div class="input-box">
        <div class="input-line-1">
            <label for=" ">函数名：</label>
            <input type="text" index="2" placeholder="请输入控制器名" class="app_num func" field="func" rexg="^[a-zA-Z][A-Za-z0-9_]+" msg="格式不正确" rexIndex="3">
        </div>
        <span id=""></span>
    </div>
</div>
<script>
    layui.use(["table"], function() {
        var laytab = layui.table;
        //laydate 时间控件
        var heigth = $("#page-container").height() - 80;
        $(".dhh-block-url-bind-tab").height(heigth);
        //搜索
        $("#block-url-bind-search").on("click", function() {
            laytab.reload('usertable');
        });

        renderTable();
        delRow("#dhh-block-url-bind .del", "/settings/domain_bind_del", function() {
            laytab.reload('usertable');
        });
        $("#block-url-bind-add").on("click", function() {
            showWindow();
        });
        $("#dhh-block-url-bind").on("click", ".edit", function() {
            showWindow(JSON.parse($(this).attr("data")));
        });

        function showWindow(data) {
            var dat = "";
            var urls = "";
            var status = "";
            if (data != undefined) {
                status = 0;
                dat = data;
                urls = "/settings/domain_bind_edit"
            } else {
                urls = "/settings/domain_bind_add";
                status = 1;

            }
            var rex = [0, 0, 0, 0]
            var index = layer.open({
                type: 1,
                shade: 0.6,
                title: (data ? "修改" : "添加") + "模块域名绑定",
                area: [$(document).width() * 0.4 + "px", $(document).height() * 0.7 + "px"],
                btn: [(data ? "修改" : "添加")],
                id: "edit-add-block-url-bind",
                content: $("#input-model").html(),
                yes: function() {
                    if ($("#edit-add-block-url-bind .domain").val() == "" && $("#edit-add-block-url-bind .func").val() == "" && $("#edit-add-block-url-bind .module").val() == "" && $("#edit-add-block-url-bind .controller").val() == "") {
                        layer.msg("请填写完整信息！");
                    } else {
                        var y = 0;
                        for (var i = 0; i < rex.length; i++) {
                            y += rex[i];
                        }
                        if (y == 0) {
                            var parm = {
                                domain: $("#edit-add-block-url-bind .domain").val(),
                                module: $("#edit-add-block-url-bind .module").val(),
                                controller: $("#edit-add-block-url-bind .controller").val(),
                                func: $("#edit-add-block-url-bind .func").val()
                            }
                            if (status == 0) {
                                parm.id = dat.id;
                            }
                            $.ajax({
                                url: urls,
                                type: "post",
                                data: parm,
                                dataType: "json",
                                beforeSend: function() {
                                    loadIndex = layer.load(0);
                                },
                                success: function(d) {
                                    layer.close(loadIndex);
                                    layer.close(index);
                                    if (d.result == "1") {
                                        layer.msg((data ? "修改" : "添加") + "成功！", {
                                            icon: 1,
                                            time: 2000
                                        });

                                        laytab.reload('usertable');
                                    } else {
                                        layer.msg((data ? "修改" : "添加") + "失败！", {
                                            icon: 2,
                                            time: 2000
                                        });
                                    }
                                },
                                error: function() {
                                    layer.close(loadIndex);
                                    layer.close(index);
                                    layer.msg("网络异常！", {
                                        icon: 2,
                                        time: 2000
                                    });
                                }
                            });
                        }
                    }
                },
                success: function() {
                    if (status == 0) {

                        for (var i = 0; i < $("#edit-add-block-url-bind .app_num").length; i++) {
                            $("#edit-add-block-url-bind .app_num").eq(i).val(dat[$(".app_num").eq(i).attr("field")]);
                        }

                    }
                    $("#edit-add-block-url-bind .app_num").on("blur", function() {
                        if (new RegExp($(this).attr("rexg")).test($(this).val()) || $(this).val() == "") {
                            $(this).css("border", "solid 1px lightgray");
                            rex[Number($(this).attr("index"))] = 0;
                            $(this).parent().next().html("");
                        } else {
                            $(this).parent().next().html("<span style='color:indianred'>" + $(this).attr("msg") + "</span>");
                            $(this).css("border", "solid 1px indianred");
                            rex[Number($(this).attr("index"))] = 1;
                        }
                    });
                    $("#edit-add-block-url-bind .app_num").on("focus", function() {
                        $(this).parent().next().html("");
                        $(this).css("border", "solid 1px lightgray");
                    });

                }
            });
        }

        function renderTable() {
            laytab.render({
                elem: '#dhh-block-url-bind-table',
                height: heigth,
                url: "/settings/domain_bind_list",
                method: "get",
                id: "usertable",
                response: {
                    statusName: "result",
                    msgName: 'tips' //规定状态信息的字段名称，默认：msg
                        ,
                    countName: 'total' //规定数据总数的字段名称，默认：count
                        ,
                    dataName: 'rows',
                    statusCode: 1 //规定成功的状态码，默认：0
                },
                request: {
                    pageName: 'page' //页码的参数名称，默认：page
                        ,
                    limitName: 'lines' //每页数据量的参数名，默认：limit
                },
                done: function(d) {
                    $(".layui-none").text(d.tips);
                },
                parseData: function(res) { //res 即为原始返回的数据
                    return {
                        "result": res.result, //解析接口状态
                        "tips": res.tips, //解析提示文本
                        "total": res.total, //解析数据长度
                        "rows": res.rows //解析数据列表
                    }
                },
                cols: [
                    [{
                        title: "绑定的域名",
                        field: "domain",
                        unresize: true,
                    }, {
                        title: "绑定的模块",
                        field: "module"
                    }, {
                        title: "绑定的控制器",
                        field: "controller"
                    }, {
                        title: "绑定的函数",
                        field: "func",
                    }, {
                        title: "操作",
                        unresize: true,
                        width: "10%",
                        templet: function(d) {
                            return "<a class='click-opraty'><i class='layui-icon layui-icon-edit edit' data='" + JSON.stringify(d) + "' style='color:#393D49;'></i></a>" +
                                "<a class='click-opraty'><i class='layui-icon layui-icon-delete del' uid='" + d.id + "' style='color:#393D49;'></i></a>";
                        }
                    }]
                ],
                page: true,
                limits: [20, 50, 100],
                limit: 20,
                loading: true,
                skin: {
                    even: true
                },
            });
        }
    });
</script>